import React, { useState, useCallback } from 'react';
import { Button, Card, Space } from 'antd';

// 子组件，使用 React.memo 优化渲染
const ChildComponent = React.memo(({ onButtonClick }: { onButtonClick: () => void }) => {
  // 当按钮点击，子组件不会重新渲染，因为onButtonClick被缓存起来了
  console.log('ChildComponent rendered');
  return (
    <Button onClick={onButtonClick}>
      点击子组件按钮
    </Button>
  );
});

const App = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 使用 useCallback 缓存函数
  const handleButtonClick = useCallback(() => {
    setCount(c => c + 1);
  }, []); // 空依赖数组，因为使用了函数式更新

  return (
    <Card title="使用 useCallback">
      <Space direction="vertical">
        <div>点击次数: {count}</div>
        <input
          value={text}
          onChange={e => setText(e.target.value)}
          placeholder="随便输入点内容"
        />
        <ChildComponent onButtonClick={handleButtonClick} />
      </Space>
    </Card>
  );
};

export default App;
